<template>
  <MobileTable v-if="type === 'config-mobile' || type === 'mobile'" @change="onChange" />
  <MultiRowTable
    v-if="type === 'config-table' || type === 'table'"
    :config="config"
    :list="input"
    @addRow="addRow"
    @delRow="delRow"
    @update="changeValue"
  />
</template>

<script setup lang="ts">
import * as utils from './utils'
const emits = defineEmits(['update'])
const props = defineProps<{
  id: string
  tdId: string
  formType: string
  formTypeName?: string
  config: any
  
  type: string // config table mobile print
  formValue?: string
}>()
const input = ref<any[]>([])
const addRow = () => {
  input.value.push(utils.initTableObject(props.config))
  onChange()
}
const delRow = (index: number) => {
  input.value.splice(index, 1)
  onChange()
}
const changeValue = (arr: any[]) => {
  input.value = JSON.parse(JSON.stringify(arr))
  onChange()
}
const onChange = () => {
  if (input.value.length) {
    emits('update', JSON.stringify(input.value))
  }
}
onMounted(() => {
  try {
    if (props.formValue) {
      input.value = JSON.parse(props.formValue)
    } else {
      input.value = utils.initTableList(props.config)
    }
  } catch (error) {
    console.log(error)
  }
})
</script>
